<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form :form="form" slot="detail">
        <a-row>
          <a-col :span="8">
            <!--            <a-form-item label="所属分类" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
            <!--              <a-input v-decorator="['goodsCategoryId']" ></a-input>-->
            <!--<div>
              <j-tree-dict v-model="goodsCategoryId" field="code" :async="false" style="width: 300px" placeholder="请输入所属分类" parentCode="goodsCategoryId"/>
              {{ goodsCategoryId }}
            </div>-->
            <a-col :span="24">
              <a-form-item label="所属分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <!--<j-tree-select
                  v-decorator="['goodsCategoryId']"
                  placeholder="请选择菜单"
                  dict="biz_goods_category,name,id"
                  pidField="pid"
                  pidValue="0"
                />-->
                <j-tree-select
                  ref="treeSelect"
                  placeholder="请选择上级分类"
                  v-decorator="['goodsCategoryId', validatorRules.pid]"
                  dict="biz_goods_category,name,id"
                  pidField="goodsCategoryId"
                  pidValue="0"
                  hasChildField="has_child">
                </j-tree-select>
              </a-form-item>

            </a-col>
            <!--              <a-col :span="12">选中的值(v-model)：{{getFormFieldValue('goodsCategoryId')}}</a-col>-->
          </a-col>
          <a-col :span="8">
            <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['name', validatorRules.name]" placeholder="请输入名称"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="门店" :labelCol="labelCol" :wrapperCol="wrapperCol">

              <j-popup
                v-decorator="['shopNames']"
                code="shop_select"
                :trigger-change="true"
                org-fields="id,shop_name"
                dest-fields="ids,shopNames"
                @callback="popupCallback"
                :multi="true"
              />
              <!--              {{ getFormFieldValue('ids') }}-->
            </a-form-item>
            <a-form-item label="v-decorator模式被回调的值" style="height: 0px;overflow: hidden;margin-bottom: 0" >
              <a-input v-decorator="['ids']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="简介" :labelCol="{span:2}" :wrapperCol="{span:21}">
              <!--              <j-editor v-decorator="['synopsis',{trigger:'input'}]"/>-->
              <a-textarea v-decorator="['synopsis']" rows="4" placeholder="请输入简介"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="商品图" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-image-upload :isMultiple="false" v-decorator="['pic']"></j-image-upload>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="团购图" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-image-upload :isMultiple="false" v-decorator="['groupPurchasePic']"></j-image-upload>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="轮播图" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-image-upload isMultiple v-decorator="['albumPics']"></j-image-upload>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['unit']" :trigger-change="true" dictCode="unit" placeholder="请选择单位"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="商品重量" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['weight']" placeholder="请输入商品重量" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="成本价" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['costPrice']" placeholder="请输入成本价" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="建议售价" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['suggestedPrice']" placeholder="请输入建议售价" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="市场价" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['originalPrice']" placeholder="请输入市场价" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="团购价格" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['groupPurchasePrice']" placeholder="请输入团购价格" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="关键字" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['keywords']" placeholder="请输入关键字"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="成团人数" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['groupSize']" placeholder="请输入成团人数" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="限购数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['limitedQuantity']" placeholder="请输入限购数量(-1不限购)" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择开始时间" v-decorator="['startTime']" :trigger-change="true" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择结束时间" v-decorator="['endTime']" :trigger-change="true" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="预计到货时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <!--              <a-input v-decorator="['expectedArrivalDate']" placeholder="请输入预计到货时间"></a-input>-->
              <j-date placeholder="请输入预计到货时间" v-decorator="['expectedArrivalDate']" :trigger-change="true" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <!--<a-col :span="24">
            <a-form-item label="上架状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['status']" :trigger-change="true" dictCode="goods_status" placeholder="请选择删除状态[-1:已删除,0:已下架,1:已上架]"/>
            </a-form-item>
          </a-col>-->
          <!--<a-col :span="24">
            <a-form-item label="删除状态[0:正常,1:已删除]" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['deleted']" :trigger-change="true" dictCode="del_flag" placeholder="请选择删除状态[-1:已删除,0:已下架,1:已上架]"/>
            </a-form-item>
          </a-col>-->
          <a-col :span="8">
            <a-form-item label="新品状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['newStatus']" :trigger-change="true" dictCode="new_status" placeholder="请选择新品状态"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="推荐状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['recommandStatus']" :trigger-change="true" dictCode="recommand_status" placeholder="请选择推荐状态"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['sort']" placeholder="请输入排序" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="商品详情" :labelCol="{span:2}" :wrapperCol="{span:21}">
              <!--              <a-textarea v-decorator="['detail']" rows="4" placeholder="请输入商品详情"/>-->
              <j-editor v-decorator="['detail',{trigger:'input'}]" @input="input"/>
            </a-form-item>
          </a-col>
          <!--<a-col :span="24">
            <a-form-item label="创建人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['createBy']" placeholder="请输入创建人"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择创建时间" v-decorator="['createTime']" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="更新人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['updateBy']" placeholder="请输入更新人"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="更新时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择更新时间" v-decorator="['updateTime']" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>-->
          <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JFormContainer from '@/components/jeecg/JFormContainer'
  import JDate from '@/components/jeecg/JDate'
  import JImageUpload from '@/components/jeecg/JImageUpload'
  import JDictSelectTag from "@/components/dict/JDictSelectTag"
  import JEditor from '@/components/jeecg/JEditor'
  import JTreeDict from '@/components/jeecg/JTreeDict'
  import JTreeSelect from '@/components/jeecg/JTreeSelect1'

  export default {
    name: 'GoodsForm',
    components: {
      JFormContainer,
      JDate,
      JImageUpload,
      JDictSelectTag,
      JEditor,
      JTreeDict,
      JTreeSelect
    },
    props: {
      //流程表单data
      formData: {
        type: Object,
        default: ()=>{},
        required: false
      },
      //表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        form: this.$form.createForm(this),
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          name: {
            rules: [
              { required: true, message: '请输入名称!'},
            ]
          },
        },
        url: {
          add: "/goods/goods/add",
          edit: "/goods/goods/edit",
          queryById: "/goods/goods/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return true
          }
        }
        return false
      }
    },
    created () {
      //如果是流程中表单，则需要加载流程表单data
      this.showFlowData();
    },
    methods: {
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'goodsCategoryId','name','shopNames','ids','synopsis','pic','groupPurchasePic','albumPics','unit','weight','costPrice','suggestedPrice','originalPrice','groupPurchasePrice','keywords','groupSize','limitedQuantity','startTime','endTime','expectedArrivalDate','newStatus','recommandStatus','sort','detail','createTime'))
        })
      },
      //渲染流程表单数据
      showFlowData(){
        if(this.formBpm === true){
          let params = {id:this.formData.dataId};
          getAction(this.url.queryById,params).then((res)=>{
            if(res.success){
              this.edit (res.result);
            }
          });
        }
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
              method = 'put';
            }
            let formData = Object.assign(this.model, values);
            console.log("表单提交数据",formData)
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
      popupCallback(row){
        this.form.setFieldsValue(pick(row,'goodsCategoryId','name','ids','shopNames','synopsis','pic','groupPurchasePic','albumPics','unit','weight','costPrice','suggestedPrice','originalPrice','groupPurchasePrice','keywords','groupSize','limitedQuantity','startTime','endTime','expectedArrivalDate','newStatus','recommandStatus','sort','detail','createTime'))
        // this.form.setFieldsValue(row)
      },
      getFormFieldValue(field){
        return this.form.getFieldValue(field)
      },
      input(e){
        console.log(e)
      }


      /*富文本图片宽度改为100%宽  高度auto  牵扯到的组件地址D:\关国祥\圣历优选\slsq_web\node_modules\tinymce\plugins\image    357  358行*/
    }
  }
</script>